<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jstl/core"
                template="./../templates/StakeholderPortalTemplate.xhtml">

    <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
    <link href="./../resources/css/tableLayout.css" rel="stylesheet" type="text/css" />

    <ui:define name="content">
        <h:form>
            <f:view beforePhase="#{mediaManagedBean.initView}">

                <p:panel id="branchAddNewBranchPanel" header="#{bundle['stakeholder.addmedia.leftnav']}">

                    <h:panelGrid columns="1" cellpadding="2" cellspacing="4" width="100%" >
                        <p:fileUpload width="100%" fileUploadListener="#{mediaManagedBean.handleImageUpload}" auto="true" multiple="true" label="Upload Photos" update="imageListPanelGrid msgs" allowTypes="*.jpg;*.png;*.gif;" description="Images"/> 
                    </h:panelGrid>



                    <h:panelGrid columns="1" cellpadding="2" cellspacing="4" width="100%" id="imageListPanelGrid" >
                        <p:growl id ="msgs" life="3000" showDetail="true">
                            <table>
                                <tr> 
                                    <ui:repeat value="#{mediaManagedBean.imageList}" var="image" id="imageList" varStatus="status">      
                                        <td>
                                            <p>
                                                <h:outputLink value="..#{image.imageUrl}" >
                                                    <h:graphicImage id="imagePreview" value="#{image.imageUrl}" style=" border-color: black; border-style:solid; width: 225px; height: 190px"/>
                                                </h:outputLink>
                                            </p>
                                            <p>
                                                <p:inputText style=" width:215px" id="caption" value="#{image.caption}" onchange="submit();" immediate="true" valueChangeListener="#{mediaManagedBean.saveCaption}">
                                                    <f:attribute name ="selectedImage" value="#{image}" />
                                                </p:inputText>
                                            </p>
                                        </td>   
                                        <h:outputText value="&lt;/tr&gt;&lt;tr&gt;" escape="false" rendered="#{(status.index + 1) mod 4 eq 0}"/>
                                    </ui:repeat>
                                </tr>   
                            </table>
                        </p:growl>
                    </h:panelGrid>
                </p:panel>
            </f:view>
        </h:form>
    </ui:define>
</ui:composition>
